<template>
  <div class="map-page">
    <!-- 操作按钮 -->
    <div class="top-bar">
      <button @click="startMoving" >开始移动</button>
      <button @click="stopMoving">关闭移动</button>
    </div>

    <!-- 地图容器 -->
    <div id="container"></div>


  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

declare global {
  interface Window {
    TMap: any
  }
}

let map: any = null
let marker: any = null
let moveTimer: any = null
let infoWindow: any = null // ✅ 全局 InfoWindow

const currentLat = ref(0)
const currentLng = ref(0)
const isMoving = ref(false)

const startLat = 39.984120
const startLng = 116.307484
let moveIndex = 0

// 模拟行走路径（60秒移动 60 次）
const pathPoints = Array.from({ length: 60 }).map((_, i) => ({
  lat: startLat + i * 0.0001, // 每次往北一点
  lng: startLng + i * 0.00005, // 每次往东一点
}))

onMounted(() => {
  const checkTMap = setInterval(() => {
    if (typeof window.TMap !== 'undefined') {
      clearInterval(checkTMap)
      initMap()
    }
  }, 100)
})

function initMap() {
  const center = new window.TMap.LatLng(startLat, startLng)

  map = new window.TMap.Map(document.getElementById('container'), {
    center,
    zoom: 17,
    pitch: 43.5,
    rotation: 45,
  })

  // 创建 marker
  marker = new window.TMap.MultiMarker({
    id: 'marker-layer',
    map,
    geometries: [
      {
        id: 'm1',
        position: center,
        properties: { title: '当前位置' },
      },
    ],
  })

  // 点击 marker 显示 InfoWindow
  marker.on('click', (evt: any) => {
    const pos = evt.geometry.position
    const lat = pos.lat.toFixed(6)
    const lng = pos.lng.toFixed(6)
    currentLat.value = lat
    currentLng.value = lng

    const htmlContent = `
      <div style="padding:8px 12px;font-size:14px;color:#333;">
        <strong>当前位置</strong><br>
        纬度：${lat}<br>
        经度：${lng}
      </div>
    `
    showInfoWindow(pos, htmlContent)
  })

  console.log('✅ 腾讯地图初始化成功')
}

// 🚀 显示 InfoWindow
function showInfoWindow(position: any, content: string) {
  // 关闭旧窗口
  if (infoWindow) {
    infoWindow.close()
  }

  // 创建或更新 InfoWindow
  infoWindow = new window.TMap.InfoWindow({
    map,
    position,
    content,
    offset: { x: 0, y: -35 },
  })
  infoWindow.open()
}
function stopMoving() {
  if (moveTimer) {
    clearInterval(moveTimer) // ✅ 正确清除定时器
    moveTimer = null
  }
  isMoving.value = false
  console.log('🏁 移动结束')
}
// 🟢 开始移动
function startMoving() {
  if (isMoving.value) return // 已在移动中则不重复开始
  isMoving.value = !isMoving.value

  moveIndex = 0

  moveTimer = setInterval(() => {
    if (moveIndex >= pathPoints.length) {
      stopMoving()
      return
    }

    const point = pathPoints[moveIndex]
    const position = new window.TMap.LatLng(point.lat, point.lng)

    // 更新 marker 坐标
    marker.updateGeometries([{ id: 'm1', position }])
    map.setCenter(position)

    // 更新 InfoWindow 位置和内容 ✅
    if (infoWindow) {
      const htmlContent = `
        <div style="padding:8px 12px;font-size:14px;color:#333;">
          <strong>当前位置</strong><br>
          纬度：${point.lat.toFixed(6)}<br>
          经度：${point.lng.toFixed(6)}
        </div>
      `
      infoWindow.setPosition(position)
      infoWindow.setContent(htmlContent)
    }

    moveIndex++
  }, 1000)
}


</script>


<style scoped lang="less">
.map-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* 顶部按钮栏 */
.top-bar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10000;
}

.top-bar button {
  padding: 8px 16px;
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.top-bar button:hover {
  background: #40a9ff;
}

.top-bar button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

#container {
  flex: 1;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
}

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 弹窗遮罩 */
//.dialog-mask {
//  position: fixed;
//  top: 0;
//  left: 0;
//  right: 0;
//  bottom: 0;
//  background: rgba(0, 0, 0, 0.4);
//  display: flex;
//  justify-content: center;
//  align-items: center;
//  z-index: 9999;
//}

.dialog {
  background: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  text-align: center;
  min-width: 250px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dialog h3 {
  margin-bottom: 10px;
}

.dialog button {
  margin-top: 15px;
  padding: 8px 20px;
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.dialog button:hover {
  background: #40a9ff;
}

/* 弹窗淡入淡出动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.25s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>
